<template>
  <div class="delivery-messages-page">
    <el-card>
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <span style="font-size:18px;font-weight:bold;">消息中心</span>
        <el-button type="primary" @click="markAllAsRead" size="small">全部标为已读</el-button>
      </div>
      <el-table :data="messages" style="margin-top:16px;" @row-click="viewDetail">
        <el-table-column prop="title" label="标题" min-width="180">
          <template #default="{ row }">
            <span v-if="!row.isRead" style="color:#409EFF;font-weight:bold;">●</span>
            {{ row.title }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="timeAgo" label="时间" width="180" />
        <el-table-column prop="isRead" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="!row.isRead?'danger':'success'">{{ !row.isRead?'未读':'已读' }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pagination.page"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="fetchList"
        layout="total, prev, pager, next"
        style="margin-top: 16px;"
      />
    </el-card>
    <!-- 消息详情弹窗 -->
    <el-dialog v-model="showDetail" title="消息详情" width="400px">
      <div v-if="currentMsg">
        <h4>{{ currentMsg.title }}</h4>
        <p style="color:#888;">{{ currentMsg.timeAgo }}</p>
        <el-divider />
        <div style="white-space:pre-line;">{{ currentMsg.message }}</div>
      </div>
      <template #footer>
        <el-button @click="showDetail=false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// import { getDeliveryNotifications, markNotificationAsRead, markAllNotificationsAsRead } from
import { formatDistanceToNow } from 'date-fns'
import { zhCN } from 'date-fns/locale'
import {getDeliveryNotifications, markAllNotificationsAsRead, markNotificationAsRead} from "@/assets/delivery.js";

const messages = ref([])
const pagination = reactive({ page: 1, size: 10, total: 0 })
const showDetail = ref(false)
const currentMsg = ref(null)

const fetchList = async () => {
  try {
    const response = await getDeliveryNotifications()
    if (response.status === 200 && response.data && response.data.data) {
      // 按时间倒序
      const sortedData = response.data.data.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
      messages.value = sortedData.map(item => ({
        id: item.id,
        type: item.type,
        title: item.title,
        message: item.message,
        isRead: item.isRead,
        timeAgo: formatDistanceToNow(new Date(item.createdAt), { addSuffix: true, locale: zhCN })
      }))
      pagination.total = messages.value.length
    } else {
      messages.value = []
      pagination.total = 0
    }
  } catch (e) {
    ElMessage.error('加载通知列表失败')
    messages.value = []
    pagination.total = 0
  }
}

const viewDetail = async (row) => {
  currentMsg.value = row
  showDetail.value = true
  if (!row.isRead) {
    await markNotificationAsRead(row.id)
    row.isRead = true
  }
}

const markAllAsRead = async () => {
  await markAllNotificationsAsRead()
  messages.value.forEach(n => n.isRead = true)
  ElMessage.success('全部已读')
}

onMounted(fetchList)
</script>

<style scoped>
.delivery-messages-page {
  padding: 24px;
  max-width: 700px;
  margin: 0 auto;
}
</style>